<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天机器人</title>
    <!-- 字体图标 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3736758_vxpb728fcyh.css">
    <!-- <link rel="stylesheet" href="./css/font_3736758_vxpb728fcyh.css"> -->
    <!-- 初始化样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
    <!-- <link rel="stylesheet" href="./css/reset.min.css"> -->
    <!-- 公共 -->
    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .container {
            width: 100%;
            height: 100%;
            background-color: #f5f4f4;
            position: relative;
            display: flex;
            flex-direction: column;
        }
    </style>
    <!-- 头部 -->
    <style>
        .top {
            width: 100%;
            height: 44px;
            padding: 15px 7px 12px 21px;
            background-color: #f5f4f4;
            display: flex;
            justify-content: space-between;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
    <!-- 好友名字 -->
    <style>
        .friend_name {
            width: 100%;
            height: 44px;
            padding: 14px 19px 14px;
            background-color: #f5f4f4;
            text-align: center;
            position: fixed;
            top: 44px;
            left: 0;
        }

        .friend_name img {
            width: 10px;
            height: 16px;
            position: absolute;
            left: 19px;
        }
    </style>
    <!-- 聊天区域 -->
    <style>
        .chat {
            width: 100%;
            /* 顶部留出88px的2个头部导航的高度 */
            /* 底部留出89px内边距让出固定在底部的对话框-防止遮挡 */
            /* 再多留出10px, 最后一条消息距离底部 */
            padding: 88px 20px 99px;
            flex: 1;
            overflow-y: scroll;
        }

        /* 隐藏滚动条 */
        .chat::-webkit-scrollbar {
            display: none;
        }

        .chat ul {
            padding-top: 20px;
        }

        .chat img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
        }

        .chat li {
            display: flex;
            align-items: top;
        }

        .chat li~li {
            /* 除了第一个li, 选择所有的兄弟li标签 */
            margin-top: 20px;
        }

        .chat .right {
            display: flex;
            justify-content: flex-end;
        }

        .left span {
            margin-left: 10px;
            border-radius: 1px 10px 1px 10px;
            display: inline-block;
            padding: 12px 16px;
            background-image: linear-gradient(180deg, #B1E393 0%, #50D287 100%);
            box-shadow: 2px 2px 10px 0px rgba(201, 201, 201, 0.1);
            color: #FFFFFF;
        }

        .right span {
            margin-right: 10px;
            border-radius: 1px 10px 1px 10px;
            display: inline-block;
            padding: 12px 16px;
            background: #FFFFFF;
            border: 1px solid rgba(247, 247, 247, 1);
            color: #000000;
        }
    </style>
    <!-- 底部区域(发送消息) -->
    <style>
        .bottom_div {
            width: 100%;
            height: 89px;
            position: fixed;
            left: 0;
            bottom: 0;
            background: #FFFFFF;
            box-shadow: 0px -5px 7px 0px rgba(168, 168, 168, 0.05);
            border-radius: 25px 25px 0px 0px;
            padding: 15px 15px 0px 15px;
        }

        /* 外框盒子 */
        .send_box {
            display: flex;
        }

        .send_box img {
            width: 34px;
            height: 34px;
        }

        /* 输入框背景 */
        .input_bg {
            height: 35px;
            background: #f3f3f3;
            border-radius: 50px;
            padding-left: 17px;
            flex: 1;
            margin-right: 15px;
            /* 让input宽度高度 */
            display: flex;
        }

        .input_bg input {
            border: 0;
            outline: 0;
            background-color: transparent;
            display: inline-block;
            width: 100%;
        }

        /* 修改输入框默认占位文字
      webkit内核, firefox18-, firfox19+, 其他
      */
        .input_bg input::-webkit-input-placeholder,
        .input_bg input:-moz-placeholder,
        .input_bg input::-moz-placeholder,
        .input_bg input:-ms-input-placeholder {
            font-family: PingFangSC-Regular;
            font-size: 26px;
            color: #C7C7C7;
            letter-spacing: 0;
            font-weight: 400;
        }

        /* 底部黑色小条 */
        .black_border {
            margin-top: 10px;
            height: 34px;
            text-align: center;
        }

        .black_border span {
            display: inline-block;
            background-color: #000;
            width: 105px;
            height: 4px;
            border-radius: 50px;
        }
    </style>
    <!-- PC端单独适配成移动大小 -->
    <style>
        /* PC端居中显示手机 */
        @media screen and (min-width: 1200px) {
            .container {
                width: 375px;
                margin: 0 auto;
                border: 1px solid black;
                /* 让fixed固定定位标签参照当前标签 */
                transform: translate(0px);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <div class="top">
            <span>9:41</span>
            <div class="icon">
                <i class="iconfont icon-xinhao"></i>
                <i class="iconfont icon-xinhao1"></i>
                <i class="iconfont icon-electricity-full"></i>
            </div>
        </div>
        <!-- 好友名字 -->
        <div class="friend_name">
            <img src="./assets/arrow-left.png" alt="">
            <span>使劲夸夸</span>
        </div>
        <!-- 聊天区域 -->
        <div class="chat">
            <ul class="chat_list">
                <!-- 他的消息 -->
                <li class="left">
                    <img src="./assets/you.png" alt="">
                    <span>小宝贝</span>
                </li>
                <!-- 我的消息 -->
                <li class="right">
                    <span>干啥</span>
                    <img src="./assets/me.png" alt="">
                </li>
            </ul>
        </div>
        <!-- 底部固定 -->
        <div class="bottom_div">
            <!-- 发送消息 -->
            <div class="send_box">
                <div class="input_bg">
                    <input class="chat_input" type="text" placeholder="说点什么吧">
                </div>
                <img class="send_img" src="./assets/send.png" alt="">
            </div>
            <!-- 底部黑条 -->
            <div class="black_border">
                <span></span>
            </div>
        </div>
    </div>
    <!-- VConsole 调试工具 -->
    <script src="./lib/vconsole.min.js"></script>
    <script>
        // 初始化VConsole
        var vConsole = new window.VConsole();

        // 聊天列表的容器，用于滚动聊天列表
        const chatDiv = document.querySelector('.chat');
        // 聊天列表
        const chatList = document.querySelector('.chat_list');
        // 输入框
        const chatInput = document.querySelector('.chat_input');
        // 发送按钮
        const sendBtn = document.querySelector('.send_img');

        // 聊天数据列表
        const list = JSON.parse(localStorage.getItem('chatList')) || [];

        // 目标ip地址
        const ipAddress = '127.0.0.1:9001';
        // 用户Id
        const userId = 10086;

        // 封装一个WebSocket对象
        const webSocket = {
            // 创建Socket对象
            socket: new WebSocket(`ws://${ipAddress}/ws/${userId}`),
            // 判断浏览器，是否支持WebSocket
            isSupportWebSocket() {
                return "WebSocket" in window;
            },
            // 初始化WebSocket
            setup() {
                // 连接成功
                this.socket.onopen = function () {
                    console.log('WebSocket 连接成功...');
                };
                // 接收到服务端的消息
                this.socket.onmessage = function (evt) {
                    // 获取消息文本
                    var receivedMsg = evt.data;
                    console.log('WebSocket 收到消息：' + receivedMsg);
                    // 添加对方的消息
                    addChatMsg2List(receivedMsg, false);
                };
                this.socket.onerror = function () {
                    console.log('WebSocket 连接发生错误...');
                };
                // 连接已关闭
                this.socket.onclose = function () {
                    console.log('WebSocket 连接已关闭...');
                };
            },
            // 发送消息
            sendMessage(msg) {
                this.socket.send(msg);
            },
            // 关闭连接
            close() {
                this.socket.close();
            }
        };
        // 初始化
        if (webSocket.isSupportWebSocket()) {
            console.log('浏览器支持WebSocket！');
            webSocket.setup();
        } else {
            alert('您的浏览器不支持WebSocket功能');
        }

        // 渲染函数
        function render() {
            const newList = list.map(({ isMe, text }) => {
                if (isMe) {
                    return `
                        <li class="right">
                        <span>${text}</span>
                        <img src="./assets/me.png" alt="">
                        </li>
                `;
                } else {
                    return `
                        <li class="left">
                        <img src="./assets/you.png" alt="">
                        <span>${text}</span>
                        </li>
                     `;
                }
            });
            chatList.innerHTML = newList.join('');
        }

        // 保存数据到本地
        function syncData2Local() {
            localStorage.setItem('chatList', JSON.stringify(list));
        }

        // 添加聊天消息到列表中
        function addChatMsg2List(text, isMe) {
            // 添加消息到数据列表中
            list.push({
                isMe: isMe,
                text: text
            });

            // 保存数据到本地
            syncData2Local();

            // 重新渲染
            render();

            // 滚动列表到底部
            scollList2Bottom();
        }

        // 滚动列表到底部
        function scollList2Bottom() {
            chatDiv.scrollTop = chatDiv.scrollHeight
        }

        // 处理发送
        function handleSend() {
            const content = chatInput.value.trim();
            if (content === '') {
                // alert('请输入你要发送的内容');
                return;
            }

            // 添加我的消息
            addChatMsg2List(content, true);
            // 清空输入框
            chatInput.value = '';

            // 发送消息
            webSocket.sendMessage(content);
        }

        // 发送按钮
        sendBtn.addEventListener('click', function (e) {
            handleSend();
        });

        // 键盘回车
        window.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                handleSend();
            }
        });

        // 首次渲染
        render();

        // 滚动到底部
        scollList2Bottom();
    </script>
</body>

</html>